﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style  type="text/css">
        html {
                        overflow-y:scroll;

        }
        html, body {
            height:100%;
            background:black;
            margin:0;
            padding:0;
            xoverflow:auto;
        }
        
        #container {
            width:800px;
            margin:0 auto;
            height:100%;
            position:relative;
            xborder:1px solid red;
        }
        
        #fixed {
            position:fixed;
            width:800px;
            height:100%;
            background:yellow;
            xborder:1px solid blue;
        }
        
        /*#f2 {
            height:100%;
        }*/
        
        #sidebar {
            width:50px;
            height:100%;
            background:red;
            position:absolute;
            left:50px;
            top:0;
        }
        
        #content {
            width:500px;
            min-height:100%;
            background:white;
            position:absolute;
            left:150px;
            top:0;
            xoverflow:auto;
        }
        
        #scroll {
            width:50px;
            height:100%;
            background:green;
            position:absolute;
            left:700px;
            top:0;
        }
        
        @media all and (max-width:799px) {
            #content {
                position:absolute;
                overflow:auto;
                height:100%;
            }
            
            #fixed {
                position:absolute;
                overflow:hidden;
            }
            
            #container {
                position:absolute;
                xoverflow:scroll;
                overflow:hidden;
            }
            
            
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="fixed">
            <div id="f2">
                <div id="sidebar">Sidebar</div>
                <div id="scroll">Scroll</div>
            </div>
        </div>
        <div id="content">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </div>
</body>
</html>
